<template>
  <div class="quality-risk">
    <div class="title">技术方案质量风险</div>
    <div class="bar-chart">
      <div class="bar" v-for="(item, idx) in bars" :key="idx">
        <div class="bar-inner" :style="{height: item.value + '%'}"></div>
        <div class="bar-label">{{item.label}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualityRisk',
  data() {
    return {
      bars: [
        {label: '桥梁', value: 60},
        {label: '隧道', value: 80},
        {label: '路基', value: 70},
        {label: '路面', value: 90},
        {label: '交安', value: 50},
        {label: '绿化', value: 30}
      ]
    }
  }
}
</script>

<style scoped>
.quality-risk {
  background: rgba(20, 40, 60, 0.8);
  border-radius: 8px;
  color: #fff;
  padding: 16px;
  margin-bottom: 10px;
}
.title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  height: 120px;
  gap: 12px;
  margin-bottom: 8px;
}
.bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bar-inner {
  width: 24px;
  background: linear-gradient(180deg, #1e90ff, #183a5a);
  border-radius: 6px 6px 0 0;
  transition: height 0.3s;
}
.bar-label {
  margin-top: 6px;
  font-size: 0.95rem;
}
</style>
